<template>
    <div class="phot-active-device-main__content">
        <div class="left">
            <ProjectManager ref="ProjectManagerRef"></ProjectManager>
        </div>
        <div class="center">
            <div class="preview-content fiber_device">
                <div class="preview">
                    <div class="project-name">{{ componentRef.projectName }}</div>
                    <div class="content">
                        <img :src="componentRef.imgUrl" />
                    </div>
                </div>
            </div>
            <MessageLog ref="MessageLogRef" />
        </div>
        <div class="right">
            <ParameterSetting ref="ParameterSettingRef"></ParameterSetting>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, getCurrentInstance } from 'vue'
import MessageLog from '../../explorers/message/MessageLog.vue'
import ProjectManager from './ProjectManager.vue'
import ParameterSetting from './ParameterSetting.vue'

const { proxy }: any = getCurrentInstance()

const componentRef: any = reactive({
    imgUrl: '',
    projectName: '',
    
})

const init = (type: any) => {
    proxy.$refs.ProjectManagerRef.init(type)
    proxy.$refs.ParameterSettingRef.init(type)
    componentRef.imgUrl = require(`@/assets/${type ? type : 'amplifier'}.png`)
    componentRef.projectName = type === 'amplifier' ? '仿真光纤放大器结构' : type === 'laser-line' ? '线形腔掺杂光纤激光器' : '环形腔掺杂光纤激光器'
    proxy.$refs.MessageLogRef.clearLog()
    proxy.$refs.MessageLogRef.init([componentRef.projectName + '工程加载成功...'])
}
defineExpose({
    init
})
</script>